<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="../../Template/TemplateAdmin.xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<ui:define name="title">
		Trang Thống Kê
  	</ui:define>

	<ui:define name="content">

		<h:outputScript library="js" name="TrangThongKe.js" target="head" />
		<!-- Content -->
		<div id="MainPanel" align="left">

			<div class="ContentPart">
				<h1 class="ContentPartTitle" align="center">TRANG THỐNG KÊ</h1>
			</div>
			<div id="tabs">
				<ul>
					<li><a href="#tabs-Top">Top Sản phẩm</a></li>
					<li><a href="#tabs-DoanhThu">Doanh Thu</a></li>
				</ul>

				<div class="ContentPartContent" id="tabs-Top">
					<div id="rightAction" align="right">

						<!-- Chả hỉu sao không chạy được ajax với cái tableContent bên dưới được nữa -->
						<h:commandLink action="#{thongKeBean.LietKeSanPhamMoiNhat()}">
							<div class="actionWideButtonRight" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../../Images/Icon/icon_lietKeLarge.png" alt="Mới nhất" />
								<div class="buttonCaption">Mới nhất</div>
							</div>
						</h:commandLink>
						<h:commandLink action="#{thongKeBean.LietKeSanPhamBanChayNhat()}">
							<div class="actionWideButtonRight" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../../Images/Icon/icon_lietKeLarge.png"
									alt="Bán chạy nhất" />
								<div class="buttonCaption">Bán chạy nhất</div>
							</div>
						</h:commandLink>
					</div>

					<div id="leftAction">
						<div class="ins">Số lượng sẽ hiển thị:</div>
						<h:selectOneMenu name="cbbSoLuong" id="cbbSoLuong"
							class="combobox" value="#{thongKeBean.nTop}">
							<f:selectItem itemValue="10" itemLabel="10" />
							<f:selectItem itemValue="20" itemLabel="20" />
							<f:selectItem itemValue="30" itemLabel="30" />
							<f:selectItem itemValue="40" itemLabel="40" />
							<f:selectItem itemValue="50" itemLabel="50" />
							<f:selectItem itemValue="60" itemLabel="60" />
							<f:selectItem itemValue="70" itemLabel="70" />
							<f:selectItem itemValue="80" itemLabel="80" />
							<f:selectItem itemValue="90" itemLabel="90" />
							<f:selectItem itemValue="100" itemLabel="100" />
							<f:selectItem itemValue="150" itemLabel="150" />
							<f:selectItem itemValue="200" itemLabel="200" />
						</h:selectOneMenu>
						<hr />
						<div class="ins">Lọc theo thời gian:</div>
						<div class="Filter">
							<label for="cbbThoiGian">Thời gian</label>
							<h:selectOneMenu name="cbbSoLuong" id="cbbThoiGian"
								class="combobox" value="#{thongKeBean.nThoigian}">
								<f:selectItem itemValue="-1" itemLabel="Tất cả" />
								<f:selectItem itemValue="1" itemLabel="1 Tháng" />
								<f:selectItem itemValue="2" itemLabel="2 Tháng" />
								<f:selectItem itemValue="3" itemLabel="3 Tháng" />
								<f:selectItem itemValue="6" itemLabel="6 Tháng" />
								<f:selectItem itemValue="12" itemLabel="12 Tháng" />
							</h:selectOneMenu>
						</div>
					</div>
				</div>

				<div class="ContentPartContent" id="tabs-DoanhThu">
					<div id="rightAction" align="right">
						<h:commandLink action="#{thongKeBean.ThongKe()}">
							<div class="actionLargeButton" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../../Images/Icon/icon_addLarge.png" alt="Thống kê" />
								<div class="buttonCaption">Thống kê</div>
							</div>

							<!-- <f:ajax execute="@form" render="panelDoanhThu" /> -->
						</h:commandLink>
					</div>

					<div id="leftAction">
						<div class="ins">Đối tượng thống kê:</div>
						<br />
						<h:selectOneRadio id="doiTuongThongKe"
							value="#{thongKeBean.doiTuongThongKe}"
							onclick="ShowPanelDoiTuong()">
							<f:selectItem itemValue="SanPham" itemLabel="Sản phẩm"
								action="ShowPanelSanPham()" />
							<f:selectItem itemValue="NguoiDung" itemLabel="Người dùng"
								action="ShowPanelNguoiDung()" />
							<f:selectItem itemValue="DoTuoi" itemLabel="Độ tuổi người dùng"
								action="ShowPanelDoTuoi()" />
						</h:selectOneRadio>

						<hr />
						<div class="ins">Điều kiện thống kê</div>
						<div id="panelSanPham" class="Filter">

							<div class="bold">Sản phẩm:</div>
							<label for="cbbNhomSanPham">Nhóm SP: </label>

							<h:selectOneMenu name="cbbNhomSanPham" id="cbbNhomSanPham"
								class="combobox" value="#{thongKeBean.maNhomThongKe}">
								<f:selectItem itemValue="-1" itemLabel="Tất cả" />
								<f:selectItems value="#{headerBean.lstDanhMuc}" var="danhMuc"
									itemLabel="#{danhMuc.getTennhom()}"
									itemValue="#{danhMuc.getManhom()}" />
								<f:ajax listener="#{thongKeBean.changeNhomListener}"
									render="cbbLoaiSanPham" />
							</h:selectOneMenu>
							-- <label for="cbbLoaiSanPham">Loại Sản phẩm: </label>
							<h:selectOneMenu name="cbbLoaiSanPham" id="cbbLoaiSanPham"
								class="combobox" value="#{thongKeBean.maLoaiThongKe}">
								<f:selectItems value="#{thongKeBean.lstLoaiSanPham}"
									var="danhMucLoaiSanPham"
									itemLabel="#{danhMucLoaiSanPham.getTenloaisanpham()}"
									itemValue="#{danhMucLoaiSanPham.getMaloaisanpham()}" />
							</h:selectOneMenu>
							<!-- 
							<h:selectOneMenu name="cbbTenSanPham" id="cbbTenSanPham"
								class="combobox">
								<f:selectItem itemValue="-1" itemLabel="ABC San pham" />
								<f:selectItem itemValue="1" itemLabel="1 Tháng" />
								<f:selectItem itemValue="2" itemLabel="2 Tháng" />
								<f:selectItem itemValue="3" itemLabel="3 Tháng" />
								<f:selectItem itemValue="6" itemLabel="6 Tháng" />
								<f:selectItem itemValue="12"
									itemLabel="Nguyễn Quốc Nhã đẹp trai tài hoa
									Nguyễn Quốc Nhã đẹp trai tài hoa Nguyễn Quốc Nhã đẹp trai tài
									hoa" />
							</h:selectOneMenu> -->
						</div>
						<div id="panelNguoiDung" class="Filter">

							<label for="cbbTenNguoiDung">Người dùng:</label>
							<h:selectOneMenu name="cbbTenNguoiDung" id="cbbTenNguoiDung"
								class="combobox" value="#{thongKeBean.loaiNguoiDung}">
								<f:selectItem itemValue="member" itemLabel="Thành viên (Member)" />
								<f:selectItem itemValue="admin"
									itemLabel="Quản Trị Viên (Administrator)" />
							</h:selectOneMenu>

						</div>
						<div id="panelDoTuoi" class="Filter">
							<label for="cbbDoTuoi">Độ tuổi:</label>
							<h:selectOneMenu name="cbbDoTuoi" id="cbbDoTuoi" class="combobox"
								value="#{thongKeBean.doTuoi}">
								<!-- <f:selectItem itemValue="-1" itemLabel="Tất cả độ tuổi" /> -->
								<f:selectItem itemValue="&lt;=20" itemLabel="nhỏ hơn 20 tuổi" />
								<f:selectItem itemValue="&lt;=30" itemLabel="20 - 30 tuổi" />
								<f:selectItem itemValue="&lt;=40" itemLabel="30 - 40 tuổi" />
								<f:selectItem itemValue="&gt;40" itemLabel="lớn hơn 40 tuổi" />
							</h:selectOneMenu>

						</div>
						<div id="panelThoiGian" class="Filter">
							<label for="groupThoiGian">Thời gian:</label> <br />

							<h:selectOneRadio id="groupThoiGian"
								value="#{thongKeBean.loaiThoiGian}"
								onclick="ShowPanelChonThoiGian()">
								<f:selectItem id="KhoangThoiGian" itemValue="KhoangThoiGian"
									itemLabel="Theo Khoảng thời gian:" />
								<f:selectItem id="MocThoiGian" itemValue="MocThoiGian"
									itemLabel="Trong: " />
							</h:selectOneRadio>

							<div id="panelKhoangThoiGian" class="Filter">
								<h:selectOneMenu value="#{thongKeBean.khoangThoiGian}"
									class="combobox">
									<f:selectItem itemValue="-1" itemLabel="Tất cả" />
									<f:selectItem itemValue="1" itemLabel="1 Tháng" />
									<f:selectItem itemValue="2" itemLabel="2 Tháng" />
									<f:selectItem itemValue="3" itemLabel="3 Tháng" />
									<f:selectItem itemValue="6" itemLabel="6 Tháng" />
									<f:selectItem itemValue="12" itemLabel="12 Tháng" />
								</h:selectOneMenu>
							</div>
							<div id="panelMocThoiGian" class="Filter">
								Từ:
								<h:inputText class="datePicker" id="txtTuNgay" name="txtTuNgay"
									value="#{thongKeBean.thoiGianTu}" />
								Đến
								<h:inputText class="datePicker" id="txtDenNgay"
									name="txtDenNgay" value="#{thongKeBean.thoiGianDen}" />
							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="ContentPart">
				<div class="ContentPartContent">
					<h:messages id="messageNotification" />
				</div>
			</div>

			<!-- content PanelSanPhamTop -->
			<div class="ContentPart" id="panelSanPhamTop">
				<h:panelGroup rendered="#{not empty thongKeBean.lstSanPham}">
					<h3 class="ContentPartHeader">Danh sách Top Sản phẩm:</h3>
					<h:panelGroup id="tableContentTop">
						<h:dataTable value="#{thongKeBean.lstSanPham}" var="sp"
							styleClass="tableDulieu"
							rendered="#{not empty thongKeBean.lstSanPham}"
							rowClasses="rowLe,rowChan">

							<ui:param name="index"
								value="#{thongKeBean.lstSanPham.indexOf(sp)}" />

							<h:column>
								<f:facet name="header">STT</f:facet>
								<h:outputText value="#{index + 1}" />
							</h:column>
							<h:column>
								<f:facet name="header">Mã SP</f:facet>
								<h:commandLink action="#">#{sp.masanpham}</h:commandLink>
							</h:column>
							<h:column>
								<f:facet name="header">Tên SP</f:facet>
								<h:commandLink action="#">#{sp.tensanpham}</h:commandLink>
							</h:column>
							<h:column>
								<f:facet name="header">Loại</f:facet>
								<h:outputText value="#{sp.loaisanpham.tenloaisanpham}" />
							</h:column>
							<h:column>
								<f:facet name="header">Nhà SX</f:facet>
								<h:outputText value="#{sp.nhasanxuat.tennhansanxuat}" />
							</h:column>
							<h:column>
								<f:facet name="header">Xuất xứ</f:facet>
								<h:outputText value="#{sp.xuatxu}" />
							</h:column>
							<h:column>
								<f:facet name="header">Ngày nhận SP</f:facet>
								<h:outputText value="#{sp.ngaynhansanpham}" />
							</h:column>
							<h:column>
								<f:facet name="header">Tổng tiền (VNĐ)</f:facet>
								<h:outputText value="#{sp.giaban}" styleClass="tien-te">
									<f:convertNumber groupingUsed="true" pattern="#0,000" />
								</h:outputText>
							</h:column>
							<h:column>
								<f:facet name="header">Xóa</f:facet>
								<h:outputText value="Xóa" rendered="#{sp.daxoa}" />
								<h:outputText value="Chưa" rendered="#{not sp.daxoa}" />
							</h:column>
						</h:dataTable>
					</h:panelGroup>
				</h:panelGroup>
			</div>
			<h:panelGroup id="panelDoanhThu">
				<!-- content PanelSanPham -->
				<div class="ContentPart">
					<h:panelGroup
						rendered="#{not empty thongKeBean.lstSanPhamDoanhThu}">
						<h3 class="ContentPartHeader pointerCursor"
							onclick="return ShowHidePanelSanPham();">Danh sách Thống kê
							theo Sản phẩm:</h3>
						<h:panelGroup id="tableContentSanPham">
							<h:dataTable value="#{thongKeBean.lstSanPhamDoanhThu}" var="sp"
								styleClass="tableDulieu"
								rendered="#{not empty thongKeBean.lstSanPhamDoanhThu}"
								rowClasses="rowLe,rowChan">

								<ui:param name="index"
									value="#{thongKeBean.lstSanPhamDoanhThu.indexOf(sp)}" />

								<h:column>
									<f:facet name="header">STT</f:facet>
									<h:outputText value="#{index + 1}" />
								</h:column>
								<h:column>
									<f:facet name="header">Mã SP</f:facet>
									<h:commandLink action="#">#{sp.sanpham.masanpham}</h:commandLink>
								</h:column>
								<h:column>
									<f:facet name="header">Tên SP</f:facet>
									<h:commandLink action="#">#{sp.sanpham.tensanpham}</h:commandLink>
								</h:column>
								<h:column>
									<f:facet name="header">Loại</f:facet>
									<h:outputText value="#{sp.sanpham.loaisanpham.tenloaisanpham}" />
								</h:column>
								<h:column>
									<f:facet name="header">Nhà SX</f:facet>
									<h:outputText value="#{sp.sanpham.nhasanxuat.tennhansanxuat}" />
								</h:column>
								<h:column>
									<f:facet name="header">Xuất xứ</f:facet>
									<h:outputText value="#{sp.sanpham.xuatxu}" />
								</h:column>
								<h:column>
									<f:facet name="header">Số lượng</f:facet>
									<h:outputText value="#{sp.soluong}" />
								</h:column>
								<h:column>
									<f:facet name="header">Tổng tiền (VNĐ)</f:facet>
									<h:outputText value="#{sp.tongtien}" styleClass="tien-te">
										<f:convertNumber groupingUsed="true" pattern="#0,000" />
									</h:outputText>
								</h:column>
							</h:dataTable>

						</h:panelGroup>
						<div class="ContentPartContent" align="right">
							<h:dataTable align="right">
								<h:column>
									<f:facet name="header">Tổng doanh thu</f:facet>
								</h:column>
								<h:column>
									<f:facet name="header">
										<div style="width: 200px; display: inline-block;"
											align="right">
											<strong><font color="#FF0000"> <h:outputText
														value="#{thongKeBean.TinhTongTienTheoSanPham()}">
														<f:convertNumber groupingUsed="true" pattern="#0,000" />
													</h:outputText> VNÐ
											</font></strong>
										</div>
									</f:facet>
								</h:column>
							</h:dataTable>
							<h:commandButton class="buttonLink button" action="#"
								value="Xuất báo cáo" />
						</div>
					</h:panelGroup>
				</div>
				<!-- content PanelNguoiDung -->
				<div class="ContentPart">
					<h:panelGroup
						rendered="#{not empty thongKeBean.lstLoaiNguoiDungDoanhThu}">
						<h3 class="ContentPartHeader pointerCursor"
							onclick="return ShowHidePanelNguoiDung();">Danh sách Thống
							kê theo Người dùng:</h3>
						<h:panelGroup id="tableContentNguoiDung">
							<h:dataTable value="#{thongKeBean.lstLoaiNguoiDungDoanhThu}"
								var="lnd" styleClass="tableDulieu"
								rendered="#{not empty thongKeBean.lstLoaiNguoiDungDoanhThu}"
								rowClasses="rowLe,rowChan">

								<ui:param name="index"
									value="#{thongKeBean.lstLoaiNguoiDungDoanhThu.indexOf(lnd)}" />

								<h:column>
									<f:facet name="header">STT</f:facet>
									<h:outputText value="#{index + 1}" />
								</h:column>
								<h:column>
									<f:facet name="header">Tên loại</f:facet>
									<h:commandLink action="#">#{lnd.tenloai}</h:commandLink>
								</h:column>
								<h:column>
									<f:facet name="header">Tổng doanh thu (VNĐ)</f:facet>
									<h:outputText value="#{lnd.tongdoanhthu}" styleClass="tien-te">
										<f:convertNumber groupingUsed="true" pattern="#0,000" />
									</h:outputText>
								</h:column>
							</h:dataTable>
						</h:panelGroup>
						<div class="ContentPartContent" align="right">
							<h:dataTable align="right">
								<h:column>
									<f:facet name="header">Tổng doanh thu</f:facet>
								</h:column>
								<h:column>
									<f:facet name="header">
										<div style="width: 200px; display: inline-block;"
											align="right">
											<strong><font color="#FF0000"> <h:outputText
														value="#{thongKeBean.TinhTongTienTheoNguoiDung()}">
														<f:convertNumber groupingUsed="true" pattern="#0,000" />
													</h:outputText> VNÐ
											</font></strong>
										</div>
									</f:facet>
								</h:column>
							</h:dataTable>
							<h:commandButton class="buttonLink button" action="#"
								value="Xuất báo cáo" />
						</div>
					</h:panelGroup>
				</div>
				<!-- content PanelDoTuoi -->
				<div class="ContentPart">
					<h:panelGroup rendered="#{not empty thongKeBean.lstDoTuoiDoanhThu}">
						<h3 class="ContentPartHeader pointerCursor"
							onclick="return ShowHidePanelDoTuoi();">Danh sách Thống kê
							theo Độ tuổi:</h3>
						<h:panelGroup id="tableContentDoTuoi">
							<h:dataTable value="#{thongKeBean.lstDoTuoiDoanhThu}" var="dtdt"
								styleClass="tableDulieu"
								rendered="#{not empty thongKeBean.lstDoTuoiDoanhThu}"
								rowClasses="rowLe,rowChan">

								<ui:param name="index"
									value="#{thongKeBean.lstDoTuoiDoanhThu.indexOf(dtdt)}" />

								<h:column>
									<f:facet name="header">STT</f:facet>
									<h:outputText value="#{index + 1}" />
								</h:column>
								<h:column>
									<f:facet name="header">Tên loại</f:facet>
									<h:commandLink action="#">#{dtdt.tendotuoi}</h:commandLink>
								</h:column>
								<h:column>
									<f:facet name="header">Tổng doanh thu (VNĐ)</f:facet>
									<h:outputText value="#{dtdt.tongdoanhthu}" styleClass="tien-te">
										<f:convertNumber groupingUsed="true" pattern="#0,000" />
									</h:outputText>
								</h:column>
							</h:dataTable>
						</h:panelGroup>
						<div class="ContentPartContent" align="right">
							<h:dataTable align="right">
								<h:column>
									<f:facet name="header">Tổng doanh thu</f:facet>
								</h:column>
								<h:column>
									<f:facet name="header">
										<div style="width: 200px; display: inline-block;"
											align="right">
											<strong><font color="#FF0000"> <h:outputText
														value="#{thongKeBean.TinhTongTienTheoDoTuoi()}">
														<f:convertNumber groupingUsed="true" pattern="#0,000" />
													</h:outputText> VNÐ
											</font></strong>
										</div>
									</f:facet>
								</h:column>
							</h:dataTable>
							<h:commandButton class="buttonLink button" action="#"
								value="Xuất báo cáo" />
						</div>
					</h:panelGroup>
				</div>
			</h:panelGroup>

		</div>
		<!-- Content -->
	</ui:define>
</ui:composition>